<template>
  <el-menu
    :default-active="menuList[0].children[0].value"
    class="el-menu-vertical-demo"
    @select="menuSelect"
    unique-opened
  >
    <el-submenu
      v-for="(item, index) in menuList"
      :key="index"
      :index="item.value"
    >
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </template>
      <el-menu-item v-for="(t, i) in item.children" :key="i" :index="t.value">
        {{ t.name }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          name: "基础功能",
          value: "main",
          icon: "el-icon-s-home",
          children: [
            {
              name: "海图初始化",
              value: "mainStart",
            },
            {
              name: "海图事件",
              value: "mainEvent",
            },
            {
              name: "海图配置",
              value: "mapSetting",
            },
          ],
        },
        {
          name: "测绘工具",
          value: "draw",
          icon: "el-icon-s-tools",
          children: [
            {
              name: "比例尺",
              value: "metricScale",
            },
            {
              name: "工具使用",
              value: "drawTool",
            },
          ],
        },
        {
          name: "图形标绘",
          value: "feature",
          icon: "el-icon-edit",
          children: [
            {
              name: "标记",
              value: "featurePoint",
            },
            {
              name: "线段",
              value: "featureLine",
            },
            {
              name: "区域",
              value: "featureArea",
            },
          ],
        },
        {
          name: "船舶绘制",
          value: "ship",
          icon: "el-icon-ship",
          children: [
            {
              name: "船舶绘制",
              value: "baseShip",
            },
            {
              name: "真轮廓",
              value: "realShip",
            },
            {
              name: "绿点图",
              value: "pointShip",
            },
          ],
        },
        {
          name: "船舶轨迹",
          value: "trajectory",
          icon: "el-icon-position",
          children: [
            {
              name: "轨迹绘制",
              value: "trajectoryDraw",
            },
            {
              name: "轨迹动画",
              value: "trajectoryAnimation",
            },
          ],
        },
        {
          name: "图层添加",
          value: "layer",
          icon: "el-icon-picture",
          children: [
            {
              name: "自定义瓦片图",
              value: "layerDiy",
            },
            {
              name: "根据中心点贴图",
              value: "layerCenter",
            },
          ],
        },
        {
          name: "水文气象",
          value: "weather",
          icon: "el-icon-sunrise",
          children: [
            {
              name: "台风绘制",
              value: "typhoon",
            },
            {
              name: "水文气象",
              value: "weather",
            },
          ],
        },
      ],
    };
  },
  methods: {
    menuSelect(val) {
      this.$emit("menuSelect", val);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-menu-item.is-active {
  background-color: #ecf5ff;
}
</style>
